import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/widgets.dart';

class ContainerDemo extends StatefulWidget {
  const ContainerDemo({Key? key}) : super(key: key);

  @override
  State<ContainerDemo> createState() => _ContainerDemoState();
}

class _ContainerDemoState extends State<ContainerDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text("Container 容器") ,
        centerTitle: true,
      ),
      body: Column(
        children: [
          // 如果只用Container包装子控件而没有任何参数的设置
          Container(
            child: Text("Container"),
          ),
          const SizedBox(height: 15),
          Container(
            // 背景色
            color: Colors.blue,
            child: Text("Container 设置背景色"),
          ),
           const SizedBox(height: 15),
           Container(
            padding: EdgeInsets.all(20),
            child: Text("Container 添加padding"),
          ),
           const SizedBox(height: 15),
           Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue
            ),
            child: Text("Container Decoration装饰"),
          ),
           const SizedBox(height: 15),
           Container(
             padding: EdgeInsets.symmetric(horizontal: 10),
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.all(Radius.circular(20)),
              color: Colors.blue
            ),
            child: Text("Container Decoration装饰2"),
          ),
           const SizedBox(height: 15),
           Container(
             padding: EdgeInsets.symmetric(horizontal: 10),
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(12),
              border: Border.all(
                color: Colors.blue,
                width: 2
              ),
            ),
            child: Text("Container Decoration装饰3"),
          ),
          const SizedBox(height: 15),
         Container(
          height: 100,
          width: 100,
          decoration: BoxDecoration(
            image:  DecorationImage(
            image: NetworkImage(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
              fit: BoxFit.cover,
          ),
            border: Border.all(
              color: Colors.blue,
              width: 2,
          ),
          borderRadius: BorderRadius.circular(12),
        ),
      ),
      Container(
      height: 100,
      width: 100,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
          fit: BoxFit.cover,
        ),
        border: Border.all(
          color: Colors.blue,
          width: 2,
        ),
        shape: BoxShape.circle,
      ),
    ),

    // Alignment 对齐方式
      Container(
        color: Colors.blue,
        child: Text('Alignment 对齐方式'),
        alignment: Alignment.center,
      ),
      Container(
        color: Colors.blue,
        child: Text('通过transform可以旋转、平移、缩放Container'),
        alignment: Alignment.center,
        height: 60,
        width: 200,
        transform: Matrix4.rotationZ(0.5),
      ),
      Container(
        // Container 默认包裹子widget
        width: 100,
        height: 100,
        // color 与 decoration 只能设置一个
        decoration: BoxDecoration(
          // 设置背景颜色
          color: Colors.yellow,
          // 设置边框
          border: Border.all(
            // 设置边框的颜色
            color: Colors.deepPurple,
            // 边框线的粗细
            width: 2.0,
            // 边框线的样式
            //BorderStyle.none 
            style: BorderStyle.solid
          ),
          // 配置边框的四个角
          borderRadius: BorderRadius.circular(20.0),

          // 设置形状
          // 当shape 取值 BoxShape 不能设置 borderRadius
          shape: BoxShape.rectangle
          
          

        ),
        // 设置内边距
        // EdgeInsets.all(20), 设置上下左右
        margin: EdgeInsets.only(left: 30,top: 10,right: 20,bottom: 40),
        padding: EdgeInsets.all(20),
       // color: Colors.yellow,
        // 当Container 的外层有大小限制 Container取用的是外层设置的大小
        child: Container(
          color:Colors.grey,
          child: Text("这是body"),
        ),
      )
         
      ],
      ),
    );
    
  }
}